<template >
    <div class="message">
        <my-header title="消息" :hasRight="true" rightTxt="发起聊天" />
        <div class="msg-warp">
            <div class="msg-nav">
                <div class="msg-nav-item">
                    <div class="icon-box"> <span></span> </div>
                    <p>粉丝</p>
                </div>
                <div class="msg-nav-item">
                    <div class="icon-box"> <span></span> </div>
                    <p>点赞</p>
                </div>
                <div class="msg-nav-item">
                    <div class="icon-box"> <span></span> </div>
                    <p>@我的</p>
                </div>
                <div class="msg-nav-item">
                    <div class="icon-box"> <span></span> </div>
                    <p>评论</p>
                </div>
            </div>
            <div class="msg-ab">
                <img src="../../assets/img/bq.jpg" alt="">
            </div>
            <div class="down">
                <div>抖音好友圈</div>
                <div><button class="btn">下载</button></div>
            </div>
            <div class="msg-list-box">
                <div class="msg-list">
                    <img src="../../assets/img/xxx.jpeg" alt="">
                    <div class="user-des">
                        <div class="top">
                        <span>抖音小助手</span>
                        <span>12：90</span>
                        </div>
                        <div class="top top-mag">
                            <span>抖音小课堂</span>
                            <span class="no-see"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myHeader from '../../components/header/myHeader'
export default {

    components:{
        myHeader
    }
}
</script>
<style scoped>

    .msg-warp{
        padding: 0 20px;
        color: #ffffff;
        background-color: #101821;
         height:1000px;
    }
    .msg-nav{
        padding: 20px 5px;
        display: flex;
        justify-content: space-between;
    }
    .msg-nav-item{
        text-align: center;
        width: 60px;
    }
    .icon-box{
        width: 60px;
        height: 60px;
        background-color: pink;
        border-radius: 5px;
        margin-bottom: 5px;
    }
    .msg-ab{
        padding: 20px 0;
        border-top: 1px solid #242630;
        border-bottom: 1px solid #242630;
    }
    .msg-ab img{
        height: 120px;
        width: 100%;
    }
    .down{
        padding: 20px 0;
        color: #ccc;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #242630;
    }
    .down .btn{
        padding: 4px 25px;
        border: none;
        background-color: #FE2C55;
        border-radius: 3px;
    }
    .msg-list-box{
        padding-top: 30px;
    }
    .msg-list{
        display: flex;
        padding: 10px 0;
    }
    .msg-list img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .user-des{
        flex: 1;
        height: 60px;
    }
    .user-des .top{
        font-size: 14px;
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
        line-height: 25px;
    }
    .top-mag{
        color:#666;
        align-items: center;
    }
    .no-see{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #FACE15;
    }
</style>>

